<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    ref="menuTree"
    node-key="catId"
    @node-click="nodeClick"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  methods: {
    fetchData() {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.data = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },

    nodeClick(data, node, component) {
      if (node.level === 3) {
        this.$emit('tree-node-click', data, node, component)
      }
    }
  },

  created() {
    this.fetchData()
  }
}
</script>

<style></style>
